<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>基础的get请求</title>
</head>
<body>
    <h1>基础的get请求</h1>
    <form id="form" action="">
        <input id="ipt" type="text">
        <button id="btn">输入学生id 查询他的详细信息</button>
    </form>
    <script>
        // 所有获取的dom节点都以o开头
        const oBtn=document.getElementById('btn')
        const oIpt=document.getElementById('ipt')
        const oForm=document.getElementById('form')


        /* 
        表单提交事件的绑定方式:
            1.给按钮绑定点击事件
            2.给form元素绑定提交事件submit
            3.一般我们不用form的提交,所以需要在事件内阻止默认事件(1.e.preventDefault  2.return false)
        */
        //button默认的type类型是submit submit默认提交form表单 form表单一提交就默认刷新
        //所以要阻止默认事件
        /* oBtn.onclick=function(e){
            e.preventDefault()
            console.log(1);
        } */

        //onsubmit就是表单被提交事件
        /* oForm.onsubmit=function(e){
            // e.preventDefault()
            console.log(2);
            return false
        } */


        oForm.onsubmit=function(){
            //1.1 实例化XMLHttpRequest
            const xhr=new XMLHttpRequest();

            //2,1 获取用户输入的userId
            const userId=oIpt.value;

           

            //1.2 设置请求信息   请求方式   路径    是否异步
            //http://127.0.0.1:8080/user这个路径就是布署在这台服务器上,所以可以不写http://127.0.0.1:8080,直接写/user(/就代表在http://127.0.0.1:8080这台服务器上)  如果是跨域请求别人的服务器就要写全

            /* 2.2.1 query传参:就是拼接在路径后的查询字符串
               2.2.2 get请求默认读取缓存,可以在query中添加一个额外的字段值为事件戳,让每次请求的地址都不一致,防止读取缓存
            */

            //3.path传参:就是把参数以路径的形式写入
            xhr.open('get',`/userInfo/${userId}?userId=${userId}&_=${Date.now()}`,true)

            //1.3 发送请求
            xhr.send()  //get请求不传body参数，只有post请求使用

            //1.4 监听事件
            xhr.onreadystatechange=function(){
                // console.log(xhr.readyState);
                if (xhr.readyState===4 && (xhr.status>=200 && xhr.status<=299)){
                    console.log(xhr.responseText);  //{"code":10000,"msg":"查询成功","data":{"name":"zhang","age":18,"sex":"男"}}
                    const data=JSON.parse(xhr.responseText)
                    console.log(data);  //{code: 10000, msg: '查询成功', data: {…}}
                }
            }

            return false
        }
    </script>
</body>
</html>